<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>test</title>
		<meta name="Description" content="" />
		<meta name="Keywords" content="" />

		<script type="text/javascript" src="../core/Jidea-core.js"></script>
		<script type="text/javascript" src="../core/Jidea-event.js"></script>
		<script type="text/javascript" src="../core/Jidea-math.js"></script>
		<script type="text/javascript" src="../core/Jidea-assert.js"></script>
		<script type="text/javascript" src="../core/Jidea-painter.js"></script>
		<script type="text/javascript" src="../core/Jidea-component.js"></script>
		<script type="text/javascript" src="../core/Jidea-interface.js"></script>
		<script type="text/javascript" src="../core/Jidea-legend.js"></script>
		<script type="text/javascript" src="../core/Jidea-label.js"></script>
		<script type="text/javascript" src="../core/Jidea-style.js"></script>
		<script type="text/javascript" src="../core/Jidea-chart.js"></script>
		<script type="text/javascript" src="../core/Jidea-coordinate.js"></script>
		<script type="text/javascript" src="../core/Jidea-element.js"></script>
		<script type="text/javascript" src="../core/Jidea-crosshair.js"></script>
		<script type="text/javascript" src="../core/Jidea-tip.js"></script>
		<script type="text/javascript" src="../core/Jidea-rectangle.js"></script>
		<script type="text/javascript" src="../core/Jidea-rectangle3d.js"></script>
		<script type="text/javascript" src="../core/Jidea-column.js"></script>
		<script type="text/javascript" src="../core/Jidea-column3d.js"></script>
		<script type="text/javascript" src="../core/Jidea-custom.js"></script>
		<script type="text/javascript" src="data.js"></script>
		<style type="text/css">
			body{
				margin-top:10px;
				text-align: center;
			}
			#myCanvas div{
			margin:0px auto;
		}
		</style>
		<script type="text/javascript">
					$(function(){
						var clientWidth =1000;//document.body.clientWidth;
						//offsetWidth
						var chart = new Jidea.Chart({
							render : 'myCanvas',
							background_color:'#2f4149',
							width:clientWidth,
							height:500
						});
					var width = 200,space=120;
					
					chart.plugin(new Jidea.Custom({
						drawFn:function(){
						
							//this.target.rectangle(10,50,600,100,'76a871');
							this.target.cube3D(
								40,376,45,30,true,width,width,width,true,1,'#BCBCBC',
								[{color:'rgba(29,190,33,0.8)'},{color:'rgba(189,155,91,0.8)'},{color:'rgba(19,90,123,0.8)'},{color:'rgba(29,10,193,0.8)'},{color:'rgba(19,90,123,0.8)'},{color:'rgba(189,105,191,0.8)'}]);
							
							this.target.cube3D(
								10,400-width/2,45,30,true,clientWidth-width/4,width/4,width/4,true,1,'#BCBCBC',
								[{color:'rgba(29,190,33,0.8)'},{color:'rgba(29,10,193,0.8)'},{color:'rgba(189,155,91,0.8)'},{color:'rgba(19,90,123,0.8)'},{color:'rgba(189,105,191,0.8)'},{color:'rgba(89,115,91,0.8)'}]);
							
							this.target.cube3D(
								261,492,45,60,true,width/4,70,width/4,true,1,'#BCBCBC',
								[{color:'rgba(29,190,33,0.8)'},{color:'rgba(29,10,193,0.8)'},{color:'rgba(19,90,123,0.8)'},{color:'rgba(189,155,91,0.8)'},{color:'rgba(189,105,191,0.8)'},{color:'rgba(89,115,91,0.8)'}]);
							
							
							this.target.cube3D(
								260,422,45,60,true,width/4,width/4,width,true,1,'#BCBCBC',
								[{color:'rgba(29,190,33,0.8)'},{color:'rgba(29,10,193,0.8)'},{color:'rgba(19,90,123,0.8)'},{color:'rgba(189,155,91,0.8)'},{color:'rgba(189,105,191,0.8)'},{color:'rgba(89,115,91,0.8)'}]);
							
							
							
							this.target.cube3D(
								space*2+width*2+40,430,45,30,true,width,width,width,true,1,'#BCBCBC',
								[{color:'rgba(29,190,33,0.8)'},{color:'rgba(29,10,193,0.8)'},{color:'rgba(19,90,123,0.8)'},{color:'rgba(189,155,91,0.8)'},{color:'rgba(89,115,91,0.8)'},{color:'rgba(189,105,191,0.8)'}]);
							
						}
					}));
					
					chart.draw();
				});
				
			</script>
		</head>
		<body>
			<div><a href="../index.html">Home</a>&nbsp; Sample</div>
			<br>
			<div id='myCanvas'></div>
		</body>
</html>
